<template>
  <component :is="tag" :class="textCls">
    <slot />
  </component>
</template>

<script lang="ts">
import { computed, defineComponent, type PropType } from 'vue'

type ITextType = 'primary' | 'success' | 'info' | 'warning' | 'danger' | ''
type ITextSize = 'large' | 'small' | ''

export default defineComponent({
  name: 'VText',
  props: {
    type: {
      type: String as PropType<ITextType>,
      default: ''
    },
    size: {
      type: String as PropType<ITextSize>,
      default: ''
    },
    truncated: {
      type: Boolean,
      default: false
    },
    tag: {
      type: String,
      default: 'span'
    }
  },
  setup(props) {
    const textCls = computed(() => [
      'v-text',
      {
        [`v-text--${props.type}`]: props.type,
        [`v-text--${props.size}`]: props.size,
        [`is-truncated`]: props.truncated
      }
    ])

    return {
      textCls
    }
  }
})
</script>

<style src="./style.css"></style>
